<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/css/main.css" type="text/css">
    <title>ECharts</title>
</head>
<body>
<div id="container">
    <div id="main"></div>
</div>
</body>
</html>
<script src="/js/echarts.min.js"></script>
<script src="/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    let myChart = echarts.init(document.getElementById('main'));
    let let data = {
        rain: [8, 18, 8, 12, 0, 19, 21, 19, 24.8, 23, 29.7],
        tmp: [12, 13, 9.7, 8, -6, 15, 25, 15, 23, 14, 23],
        winds: [3, 2.8, 5, 6.8, 6.4, 8, 7, 8.4, 7, 8, 10],
        pre: [600, 400, 550, 580, 400, 500, 700, 500, 600, 700, 650]
    }

    let colors = ['#4BC946', '#FDA975', '#27D3E2', '#FF0014'];
    let splitNumber = 5; // 分割段数

    //计算最大值
    function calMax(arr) {
        let min = Math.min.apply(null, arr);
        let max = Math.max.apply(null, arr);
        let interval = (max - min) / splitNumber; // 平均值
        max = Math.ceil(max + interval); // 向上取整
        // console.log(min, max, interval);
        return max;
    }

    //计算最小值
    function calMin(arr) {
        let min = Math.min.apply(null, arr);
        let max = Math.max.apply(null, arr);
        let interval = (max - min) / splitNumber; // 平均值
        min = min === 0 ? min : Math.floor(min - interval); // 向下取整
        // console.log(min, max, interval);
        return min;
    }

    option = {
        color: colors,
        backgroundColor: '#fff',
        title: {
            text: '2020年2月4日某站雷暴天气时序图',
            subtext: '灾害时间：2020/2/4 08:30-20202/4 10:20',
            top: '1%',
            x: 'center',
            textStyle: { color: '#2D527C', fontSize: '20', fontWeight: 'bold'},
            subtextStyle: { color: '#2D527C', fontSize: '14', fontWeight: 'bold' }
        },
        grid: {
            top: '15%',
            bottom: '10%',
            left: '15%',
            right: '15%',
        },
        legend: {
            top: '9%'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' }
        },
        xAxis: {
            type: 'category',
            axisTick: { show: false },
            axisLabel: {
                textStyle: { color: '#333333', fontSize: 14 }
            },
            axisLine: {
                show: false,
                lineStyle: { color: '#707070' }
            },
            data: ['02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
        },
        yAxis: [{
            // name: '降水(mm)',
            type: 'value',
            position: 'left',
            min: calMin(data.rain),
            max: calMax(data.rain),
            splitNumber: splitNumber,
            interval: (calMax(data.rain) - calMin(data.rain)) / splitNumber,
            splitLine: {
                lineStyle: { type: 'dashed', color: '#707070' }
            },
            axisLabel: {
                // formatter: '{value}mm',
                formatter: function(value, index) {
                    return (value + '').indexOf('.') != -1 ? value.toFixed(1) + 'mm' : value + 'mm';
                },
                textStyle: { color: colors[0], fontSize: 14 }
            },
            axisLine: { show: false },
            axisTick: { show: false }
        }, {
            // name: '气温(°C)',
            type: 'value',
            position: 'left',
            offset: 65,
            min: calMin(data.tmp),
            max: calMax(data.tmp),
            splitNumber: splitNumber,
            interval: (calMax(data.tmp) - calMin(data.tmp)) / splitNumber,
            splitLine: { show: false },
            axisLine: { show: false },
            axisLabel: {
                // formatter: '{value}°C',
                formatter: function(value, index) {
                    return parseInt(value) + '°C';
                },
                textStyle: { color: colors[1], fontSize: 14 }
            },
            axisTick: { show: false }
        }, {
            // name: '风速(m/s)',
            type: 'value',
            position: 'right',
            min: calMin(data.winds),
            max: calMax(data.winds),
            splitNumber: splitNumber,
            interval: (calMax(data.winds) - calMin(data.winds)) / splitNumber,
            splitLine: { show: false },
            axisLine: { show: false },
            axisLabel: {
                // formatter: '{value}m/s',
                formatter: function(value, index) {
                    return parseInt(value) + 'm/s';
                },
                textStyle: { color: colors[3], fontSize: 14 }
            },
            axisTick: { show: false }
        }, {
            // name: '气压(hPa)',
            type: 'value',
            position: 'right',
            offset: 54,
            min: calMin(data.pre),
            max: calMax(data.pre),
            splitNumber: splitNumber,
            interval: (calMax(data.pre) - calMin(data.pre)) / splitNumber,
            splitLine: { show: false },
            axisLine: { show: false },
            axisLabel: {
                // formatter: '{value}hPa',
                formatter: function(value, index) {
                    return parseInt(value) + 'hPa';
                },
                textStyle: { color: colors[2], fontSize: 14 }
            },
            axisTick: { show: false }
        }],
        series: [{
            name: '降水',
            type: 'bar',
            barWidth: '40%',
            data: data.rain
        },
            {
                name: '温度',
                type: 'line',
                symbol: 'circle',
                symbolSize: 8,
                yAxisIndex: 1,
                data: data.tmp
            },
            {
                name: '气压',
                type: 'line',
                symbol: 'circle',
                symbolSize: 8,
                yAxisIndex: 3,
                data: data.pre
            },
            {
                name: '风速',
                type: 'line',
                symbol: 'circle',
                symbolSize: 8,
                yAxisIndex: 2,
                data: data.winds
            }
        ]
    };


    myChart.setOption(option);
    myChart.showLoading();
    $.ajax({
        type : "post",
        async : true,
        url : "/api/option",
        data : {},
        dataType : "json",
        success : function(result) {
            if (result.code == 200) {
                myChart.hideLoading();
                option.xAxis[0].data = result.data.xAxis.data;
                option.yAxis[0].name = result.data.yAxis.name;
                option.series[0].data = result.data.series[0].data;
                option.series[0].name = result.data.series[0].name;

                option.series[1].data = result.data.series[1].data;
                option.series[1].name = result.data.series[1].name;
                myChart.setOption(option);
            }
        },
        error : function(errorMsg) {
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    });
</script>
